import {useNavigate, useParams} from "react-router-dom"
import {useEffect, useState} from "react"
import {findItemById} from "../../request/item"
import {Button, Carousel, message} from "antd"
import {HomeOutlined, LeftOutlined} from "@ant-design/icons"
import {addItemToCart} from "../../request/cart"
import './item.css'
import MyInputNumber from "./my-input-number"

function Item() {
    const {itemId} = useParams()
    const [item, setItem] = useState({imgs: [], options: []})
    const [curOptionKey, setCurOptionKey] = useState(0)
    const [purchaseNumber, setPurchaseNumber] = useState(1)
    let curOption = item.options.find(option => option.key === curOptionKey)
    if (!curOption) curOption = {}
    const navigate = useNavigate()

    useEffect(() => {
        findItemById(itemId).then(item => {
            setItem(item)
            if (item.options.length > 0) {
                setCurOptionKey(item.options[0].key)
            }
        }).catch(({msg}) => message.error(msg))
    }, [itemId])

    function purchaseCur() {
        if (!curOption.key) {
            message.error("商品不存在")
        } else if (purchaseNumber > curOption.number) {
            message.error("库存不足")
        } else {
            const items = [{
                itemId: itemId,
                optionKey: curOptionKey,
                img: curOption.img,
                label: item.label,
                optionName: curOption.name,
                optionPrice: curOption.price,
                number: purchaseNumber
            }]
            navigate('/purchase/create-order', { state: {items}})
        }
    }

    function addCurToCart() {
        addItemToCart(itemId, curOptionKey, purchaseNumber)
            .then(() => message.success((
                <span>
                    成功添加到购物车，
                    <Button type="link" onClick={() => navigate('/mall/cart')}>前往查看</Button>
                </span>
            )))
            .catch(({msg}) => message.error(msg))
    }

    return (
        <div className="mall-item-background">
            <LeftOutlined className="back" onClick={() => navigate(-1)}/>
            <div className="mall-item-container">
                <Carousel className="imgs" autoplay>
                    {item.imgs.map((url, i) => (
                        <div className="img-container" key={i}>
                            <img alt="" src={url}></img>
                        </div>
                    ))}
                </Carousel>
                <div className="info">
                    <div className="title"><span>{item.category}</span>{item.label}</div>
                    <div className="cur-option">
                        <div className="left">
                            <img alt="" src={curOption.img}></img>
                        </div>
                        <div className="right">
                            <div className="up">{curOption.name}</div>
                            <div className="down">￥{curOption.price}</div>
                        </div>
                    </div>
                    <div className="options-container">
                        <label>配置</label>
                        <div className="options">
                            {item.options.map(option => (
                                <span key={option.key}
                                      className={curOption === option ? "option cur" : "option"}
                                      onClick={() => setCurOptionKey(option.key)}
                                >
                                    {option.name}
                                </span>
                            ))}
                        </div>
                    </div>
                    <div className="purchase-number">
                        <label>数量</label>
                        <MyInputNumber
                            min={1}
                            max={curOption.number}
                            value={purchaseNumber}
                            onChange={setPurchaseNumber}
                        />
                        <span>(库存{curOption.number}件)</span>
                    </div>
                    <div className="blank"></div>
                    <div className="operations">
                        <div className="icon" onClick={() => navigate('/mall/home')}>
                            <HomeOutlined/>
                            <span>首页</span>
                        </div>
                        <div className="btns">
                            <div onClick={addCurToCart}>加入购物车</div>
                            <div onClick={purchaseCur}>立即购买</div>
                        </div>
                    </div>
                    <div className="blank"></div>
                </div>
            </div>
        </div>
    )
}

export default Item